<template>
	<view class="e-detail">
		<view class="bg-fff p-30 br-10 m-b-30">
			<view class="flex">
				<view class="flex_1 title">故障申请{{statusName}}</view>
				<u-tag :text="statusName" :type="formatStatus.type" plain plainFill></u-tag>
			</view>
			<u-divider></u-divider>
			<store-table :titleList="titleList" :dataList="dataList"></store-table>
			<view class="status p-t-30">
				设备状态：<text class="p-l-20 color-F42323 statustext">{{filterFunction(formData.status)||'fang'}}</text>
			</view>
		</view>
		<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30 p-b-20">
			<view class="reason-title">故障原因</view>
			<view class="reason" style="white-space: pre-line;">{{formData.description}}</view>
			<u-upload v-if="formData.troubleFiles" :fileList="formData.troubleFiles" name="img" multiple
				:maxCount="formData.troubleFiles.length" :previewFullImage="true" :deletable="false" width="60"
				height="60"></u-upload>
		</view>
		<view class="bg-fff p-x-30 p-y-14 br-10 m-b-30">
			<person-detail :infoList="infoList" :info="formData"></person-detail>
		</view>
		<!-- 返厂信息 -->
		<view v-if="formData.maintainDTO">
			<view class="back-title">返厂数据</view>
			<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30">
				<person-detail :infoList="backList" :info="formData.maintainDTO"></person-detail>
			</view>
			<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30 p-b-20">
				<view class="reason-title">返厂原因</view>
				<view class="reason">{{formData.maintainDTO.reason}}</view>
			</view>
			<u-gap height="40"></u-gap>
		</view>
		<view class="j-between window-bottom" v-if="statusName=='待处理'">
			<u-button type="primary" :plain="true" text="驳回" :customStyle="{marginRight: '20rpx'}"
				@click="onConsent(false)"></u-button>
			<u-button type="primary" text="通过" @click="onConsent(true)"></u-button>
		</view>
		<u-modal :show="show" @confirm="onConfirm" @cancel="onCancel" ref="uModal" :showCancelButton="true">
			<u--form labelPosition="top" :model="auditForm" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item :label="auditForm.pass?'备注':'驳回理由'" prop="comment" ref="item1">
					<u--textarea v-model="auditForm.comment"  height="80" :maxlength="-1" :show-confirm-bar="false"
						:confirmType="null" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
	import {
		uploadbaseUrl
	} from '@/request/request.js'
	export default {
		data() {
			return {
				show: false,
				formData: {
					creatName:'',
					phone:'',
					declareDate:'',
					// fileList: [{
					// 	url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					// }],
				},
				infoList: [{
						name: '申报人',
						key: 'creatName'
					},
					{
						name: '联系方式',
						key: 'phone'
					},
					{
						name: '申报日期',
						key: 'declareDate'
					},
				],
				backList: [{
						name: '寄出时间',
						key: 'mailDate'
					},
					{
						name: '寄回时间',
						key: 'mailBackDate'
					},
					{
						name: '厂家联系人',
						key: 'factoryContacts'
					},
					{
						name: '联系方式',
						key: 'contactInformation'
					},
				],
				titleList: [{
						name: '器具名称',
						span: '7'
					},
					{
						name: '准确度',
						span: '5'
					},
				],
				tablecanList: [{
						name: '申请仪器',
						key1: 'name'
					},
					{
						name: '型号规模',
						key1: 'modelNumber'
					},
					{
						name: '准确度',
						key1: 'devicePrecision'
					},
					{
						name: '制造厂商',
						key1: 'manufacturer'
					},
					{
						name: '出厂编号',
						key1: 'factoryNumber'
					},
				],


				dataList: [{
					list: [{
							value: ''
						},
						{
							value: ''
						},
					],
					content: [{
							label: '申请仪器',
							value: ''
						},
						{
							label: '型号规模',
							value: ''
						},
						{
							label: '准确度',
							value: ''
						},
						{
							label: '制造厂商',
							value: ''
						},
						{
							label: '出厂编号',
							value: ''
						},
					],
				}],
				// 从上个页面带来
				statusName: '',
				taskId: '',
				type: '',
				taskName: '',
				auditForm: {
					taskId: '',
					comment: '',
					pass: true
				},
				rules: {
					comment: {
						type: 'string',
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					},
				},
				equipList: []
			}
		},
		onLoad(options) {
			this.statusName = options.statusName
			this.taskId = options.taskId
			this.taskName = options.taskName || ''
			this.getDetail(options.id)
		},
		computed: {
			formatStatus() {
				if (this.statusName == '已处理') {
					return {
						type: 'success',
					}
				} else if (this.statusName == '待处理') {
					return {
						type: 'warning',
					}
				}
				return {
					type: 'error',
				}
			}
		},
		methods: {
			// 过滤数据转化
			filterFunction(value) {
				let resolveData
				switch (value) {
					case 1:
						resolveData = '可正常使用';
						break;
					case 2:
						resolveData = '无法使用';
						break;
					case 3:
						resolveData = '返厂维修';
						break;
					default:
						resolveData = '';
				};
				return resolveData
			},
			// 获取详情
			getDetail(id) {
				this.$api.gettroubleDetail({
					id: id
				}).then(res => {
					this.formData =  res.data
					this.formData.description = res.data.description.replaceAll("/r/n", "<br>")
					if(this.formData.maintainDTO){
					this.formData.maintainDTO.reason = res.data.maintainDTO.reason.replaceAll("/r/n", "<br>")
					}
					let arr = []
					if (res.data.troubleFiles && res.data.troubleFiles.length > 0) {
						res.data.troubleFiles.map(item => {
							arr.push({
								url: `${uploadbaseUrl}${item.url}`
							})
							// arr.push({url:`https://cdn.uviewui.com/uview/swiper/1.jpg`})
						})
					}
					this.formData.troubleFiles = arr
					this.equipList = [res.data.instrumentsDTO]
					this.equipList.map((resdata, index) => {
						this.tablecanList.map((item) => {
							this.dataList[index].list[0].value = `${resdata.name}(${resdata.modelNumber})`
							this.dataList[index].list[1].value = `${resdata.devicePrecision}`
							this.dataList[index].content.map((items) => {
								if (item.name == items.label) {
									items.value = resdata[item.key1]
								}
							})
						})
					})
				})
			},
			// 审核通过
			onConsent(value) {
				// this.show = true
				this.auditForm.taskId = this.taskId
				this.auditForm.pass = value
				if (this.auditForm.pass) {
					this.onConfirm()
				} else {
					this.show = true
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules)
					})

				}

				// if (!this.auditForm.pass) {
				// 	this.$nextTick(() => {
				// 		this.$refs.uForm.setRules(this.rules)
				// 	})
				// }
			},
			async onConfirm() {
				if (this.auditForm.pass) {
					const res = await this.$api.onPass(this.auditForm)
					if (res.msg == 'success') {
						uni.showToast({
							title: '审核成功',
						})
						// 跳转回上一页
						uni.navigateBack({
							delta: 1
						});
					}
					return
				} else {
					this.$refs.uForm.validate().then(res => {
						console.log(this.auditForm.comment)
						// this.auditForm.comment=this.auditForm.comment.replaceAll("\n", "\n")
						this.$api.onBack(this.auditForm).then(res => {
							if (res.msg == 'success') {
								uni.showToast({
									title: '审核成功',
								})
								// 跳转回上一页
								uni.navigateBack({
									delta: 1
								});
							}
						})
						this.onCancel()
					}).catch(errors => {})
				}

			},
			onCancel() {
				this.show = false
				this.$refs.uForm.resetFields()
			},
		}
	}
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss">
	$wrongColor: #F4AD23;
	$normalColor: #0e64fe;

	.e-detail {
		padding: 30rpx;
		background: linear-gradient(#0e64fe, #F7F8FA, #FFFFFF); //从上到下

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.u-col {
			:first-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #59606A;
			}

			:last-child {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.wrong {
		font-size: 24rpx;
		background-color: rgba(244, 173, 35, 0.1);
		color: $wrongColor;
		padding: 10rpx;
		border-radius: 5rpx;
	}

	.pass {
		background-color: rgba(14, 100, 254, 0.1);
		color: $normalColor;
	}

	.u-page__item__title__slot-title {
		font-size: 22rpx;
		color: #333333;
	}

	.detail-item {
		font-size: 26rpx;
		color: #909091;
		padding: 5rpx 0;
		display: flex;

		:first-child {
			width: 150rpx
		}
	}

	::v-deep .u-modal__content {
		flex-direction: column;
	}

	.status {
		font-size: 26rpx;
		color: #666666;
	}

	.statustext {
		font-size: 26rpx;
	}

	.reason {
		white-space: pre-line;
		font-size: 20rpx;
		color: #666666;
		line-height: 36rpx;
		background: #F7F9FC;
		border-radius: 5rpx;
		padding: 20rpx 10rpx;
	}

	.reason-title {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		padding-bottom: 20rpx;
	}

	.back-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding-left: 20rpx;
		border-left: 4rpx solid #0e64fe;
		margin-bottom: 30rpx;
	}
</style>